<template>
  <div class="card-out-container hanger-info-container">
    <a-spin :spinning="loading">
      <div class="header-search">
        <div>
          <a-space>
            <a-button type="primary" ghost :disabled="!hasData || !hangerNo" @click="changeHanger">{{ $t('hangManage.changeHanger') }}</a-button>
            <a-button type="warning" ghost :disabled="!hasData || !hangerNo" @click="dissociated">{{ $t('hangManage.removeRelation') }}</a-button>
          </a-space>
        </div>
        <div>
          <a-input-search v-model:value.trim="hangerNo" enter-button :placeholder="$t('other.enterHangerNo')" @search="loadData" allowClear />
<!--          <a-input-search v-model:value.trim="hangerNo" enter-button :placeholder="hangerNoHistory" @search="loadData" @blur="txtblur" />-->
        </div>
      </div>
      <section>
        <!-- <div v-if="hasData"> -->
        <div class='blue-line mb-20'>{{ $t('hangManage.hangerData') }}</div>
<!--        <list-table tableName="hangersData" :dataSource="hangerData" />-->
        <ListTable :tableName="mathRandom" :dataSource="hangerData" />

        <div class='blue-line mt-30 mb-20'>{{ $t('hangManage.hangerInfo') }}
          <a-space>
            <a-button type="warning" class="ml-10"  ghost :disabled="!this.selectedRowKeyLists.length" @click="returnHanger">
              {{ $t('hangManage.moreReturn') }}</a-button>
          </a-space>
        </div>
        <MakeDetailTable :tableName="mathRandom" :dataSource="hangerInfoList" @reOk="reOk" />
<!--        </div>-->
      </section>
    </a-spin>
    <commone-modal ref="modalForm" tableName="hangerInfo" :modalWidth="600" :cloSapn="24" modalTitle="更换衣架" @ok="modalFormOk" :needChangeTitle="false" :isUrlSave="true" />
    <CustomModal ref="customModalRef" @ok="onConfirmOk"/>
  </div>
</template>
<script>
import ListTable from './modules/listTable.vue'
import MakeDetailTable from './modules/makeDetailTable.vue'
// import axios from '@/utils/request'
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import CommoneModal from '@/components/commonModal/normalModal.vue'
import {message} from "ant-design-vue";
import {cloneDeep} from "lodash";
import axios from "@/utils/request";
import CustomModal from '@/components/confirmModal/customModal.vue'
// import {formatTime} from "@/utils";
export default {
  name: 'hangerInfo',
  components: { ListTable, MakeDetailTable,CommoneModal ,CustomModal},
  mixins: [ListMixinPm],
  data () {
    return {
      hasData: false,
      url: {
        info: '/api/hanger/hanger/hanger-info',
        dissociated: '/api/hanger/hanger/hanger-reset',
        returnUrl: '/api/hanger/hanger/rework-hanger'
      },
      hangerNo: '',
      hangerData: [],
      hangerInfoList: [],
      reworkInfoList: [],
      selectedRowKeyLists: [],
      loading: false,
      mathRandom: Math.random().toString()
    }
  },
  created() {
    this.hangerNo = this.$route.query.no ? this.$route.query.no : '';
    this.loadData();
  },
  methods: {

    async loadData () {
      let hangNoLength = this.hangerNo && this.hangerNo.length
      if (hangNoLength !== 16 && hangNoLength !== 10) {
        if (hangNoLength > 0) {
          this.hangerNo = ''
          message.error(this.$t('other.enter10or16HangerNo'))
        }
        return
      }
      this.loading = true
      let params = { hangerNo: this.hangerNo }
      try {
        const res = await axios.getAction(this.url.info, params)
        this.initData(res)
        this.loading = false
      } catch {
        this.initData({})
        this.loading = false
      }
    },
    initData (res) {
      let { hangerData, hangerInfoList } = res.success ? res.data : {}
      this.hasData = hangerData || hangerInfoList
      this.hangerData = hangerData ? [hangerData] : []
      this.hangerInfoList = hangerInfoList || []
      this.hangerInfoList && this.hangerInfoList.forEach((el,index)=> {el.listIndex = index})
      this.mathRandom = Math.random().toString()
      // console.log(this.mathRandom)
    },
    changeHanger () {
      this.$refs.modalForm.edit({
        id: null,
        oldHangerNo: this.hangerNo
      })
    },
    dissociated () {
      let params = { hangerNo: this.hangerNo }
      this.confirmChangeStatus(this.url.dissociated, params, this.$t('other.sureUntieHang'), this.$t('hangManage.removeRelation'))
    },
    currentTime () {
      return Date.now();
    },
    onUsbEventInfo () {
      let flags = [];
      let startTime = null;
      const scancodeLen = 10;
      const scancodeTime = 200;
      window.onkeydown = (e) => {
        if (!flags.length && e.key.length == 1 ) {
          flags.push(e.key);
          startTime = this.currentTime()
          return;
        }
        const diff = this.currentTime() - startTime;
        // console.log(e,flags,diff,scancodeLen,scancodeTime,'-------------------****2')
        if (flags.length < scancodeLen && diff <= scancodeTime ) {
          flags.push(e.key);
          return;
        }
        // console.log(e,flags,diff,scancodeLen,scancodeTime,'-------------------****3')
        if (flags.length === scancodeLen && diff <= scancodeTime) {
          let result = ''
          result = flags.join("");
          try {
            if (result.length == 10) {
              // console.log(result,'进入result')
              if (this.$route.path == '/hangManage/hangerInfo') {
                this.hangerNo = '';
                this.hangerNo = result;
                // console.log(this.hangerNo,'this.hangerNo')
                this.loadData();
                // console.log('1-1')
              }else{
                this.hangerNo = '';
                this.hangerNo = result;
                this.$router.push({
                  path: '/hangManage/hangerInfo', query: { no: result }
                })
                // this.loadData();
              }
            }
          } catch (err) {
            console.log( err);
          }
          flags = [];
          startTime = null;
          return;
        }

        if (diff > scancodeTime) {
          flags = [];
          startTime = null;
          return;
        }
      };
    },
    reOk(selectedRowKeyLists){
      this.selectedRowKeyLists = selectedRowKeyLists
      // console.log(selectedRowKeyLists)
    },
    clearParams(){
      this.selectedRowKeyLists = []
    },
    async returnHanger () {
      // console.log(this.selectedRowKeyLists)
      let idsArray = cloneDeep(this.selectedRowKeyLists);

      let params = {
        "hangerNo": this.hangerNo,
        "processNoList": idsArray
      }
      // console.log(params)
      // this.loadData()
      // let aaa = 3;
      // if (aaa !== 34){return false}

      let judge = 0;
      // this.selectedRowKeyLists && this.selectedRowKeyLists.forEach(item => { if (item.status !== 1) { judge = 1; } })
      if (judge === 1) {
        message.error(this.$t('common.doError'))
      } else {
        // this.editkey = 1;
        // console.log(this.editkey)
        if (idsArray && idsArray.length > 0) {
          this.customModalRef.open({
            content: '是否确定批量返工数据？',
            needOperate: params
          })
        }
      }
    },
    onConfirmOk(val) {
      axios.postAction(this.url.returnUrl, val).then(res => {
        if (res.success) {
          this.clearParams()
          message.success(this.$t('other.reworkSuccess'))
          this.loadData()
        } else {
          this.clearParams()
          message.warning(this.$t('other.reworkFail'))
        }
      })
    }
  },
  mounted () {
    this.onUsbEventInfo();
    this.hangerNo = this.$route.query.no
  }
}
</script>
